<!--
 * @Author: your name
 * @Date: 2022-01-29 20:03:39
 * @LastEditTime: 2022-03-08 22:56:05
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \dreamUi\src\views\login.vue
-->
<template>
  <div class="page">
    <span class="page-font">青春筑梦之旅后台管理登录界面</span>
    <div>
      <img style="height: 300px; margin-left: 35%;  margin-top: 20px;" src="../assets/images/loginLog.jpg"/>
    </div>
    <div class="conmmit-from">
     <el-card>
        <el-form :model="form" :rules="rules" ref="form" label-width="50px" >
        <el-form-item label="账号" prop="username">
          <el-input type="text" v-model="form.username"/>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="form.password" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">提交</el-button >
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
     </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      form: {
        username: "",
        password: ""
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    };
  },

  mounted() {},

  methods: {
    /** 登录方法 */
    submit() {
      this.$refs.form.validate((vailid) => {
        if (!vailid) {
          return this.$message.error('数据校验失败，请检查后提交');
        } else {
          // 调用接口进行登录
          this.$ajax.post('/user/login',this.form).then(res => {
            const tokenBody = res.data.data;
            let tokenHead = tokenBody.tokenHead;
            let token = tokenBody.token;
            this.$store.commit('setToken', tokenHead + ' ' +token);
            this.$router.push('/home')

          })
        }
      });
    },
    /**重置方法 */
    reset() {
      // 对表单进行重置
      this.$refs.form.resetFields();
    }
  },
};
</script>

<style scoped>
.conmmit-from {
  margin-top: 1rem;
  margin-left: 36.5%;
  width: 30%;
  height: 20%;
}
.page-font {
  margin-top: 1rem;
  margin-bottom: 1rem;
  margin-left: 45%;
  font-size: 1.25rem;
}
</style>
